$(() => {
    let getDataInfo = function () {
        myAjax('get', '/admin/data/info', {}, (res) => {
            // console.log(res);
            let htmlStr = template('info', res)
            $('.spannel_list').html(htmlStr)
        })
    }
    getDataInfo()




    myAjax('get', '/admin/data/article', {}, (res) => {
        // console.log(res);
        let date = res.date.map(item => item.date)
        let num = res.date.map(item => item.count)
        // res.date.forEach((v, i) => {
        //     date.push(v.date)
        //     num.push(v.count)
        // });
        // console.log(date, num);
        let myChart = echarts.init(document.getElementById('curve_show'))
        option = {
            grid: [{
                left: "5%",
                right: '5%',
                bottom: 40
            }],
            color: [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: '#fff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }],

            title: {
                left: 'center',
                text: '文章日新增趋势'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date //时间
            },
            yAxis: {
                type: 'value',

            },
            series: [
                {
                    data: num, //数量
                    type: 'line',
                    areaStyle: {},
                    smooth: true
                }
            ]
        };
        myChart.setOption(option);



    })
    let pie = function (arr) {
        let myChart = echarts.init(document.getElementById('pie_show'))
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    // label: {
                    //     show: false,
                    //     position: 'center'
                    // },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    // labelLine: {
                    //     show: false
                    // },
                    data: arr
                }
            ]
        };
        myChart.setOption(option);
    }

    myAjax('get', '/admin/data/category', {}, (res) => {
        let arr = res.date.map(item => ({ value: item.articles, name: item.name }))
        // console.log(arr);
        pie(arr)
    })

    let bar = function (arr1, arr2) {
        let myChart = echarts.init(document.getElementById('column_show'))
        option = {
            xAxis: {
                type: 'category',
                data: arr1
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: arr2,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    barWidth: 40
                }
            ]
        };
        myChart.setOption(option)
    }

    myAjax('get', '/admin/data/visit', {}, (res) => {
        let arr1 = Object.keys(res.data)
        let arr2 = Object.values(res.data)
        // for (let key in res.data) {
        //     arr1.push(key)
        //     arr2.push(res.data[key])
        // }
        // console.log(arr1, arr2);
        bar(arr1, arr2)
    })
})